<template>
	<div class="register">
		<h1 class="title">注册</h1>
		<div class="verification">
			<div class="verifTop">
				<input class="left" type="tel" v-model="phoneNumber" @blur="phoneNum" placeholder="请输入手机号">
				<span v-if="show" class="right" @click="getMailNumber">获取验证码</span>
				<span v-if="!show" class="right time">{{count}}秒后可获取</span>
			</div>
			<div class="message">
				<input type="text" v-model="mailNumbers" placeholder="请输入短信验证码">
			</div>
			<div class="password">
				<input v-model="passWord" @blur="passwordVer" placeholder="请设置密码">
			</div>
		</div>
		<div class="registerCon">
			<span class="top">同意《法律声明及隐私政策》</span>
			<span class="bottom" @click="getRegist">注册</span>
		</div>
		<div class="footer">
			<router-link to="/login">已有账号，直接登录</router-link>
		</div>
	</div>
</template>

<script>
	/* eslint-disable */
    // 引入这个页面需要的方法库
    import {mapGetters} from 'vuex'
    import {mailNumber, regist} from 'api/api'
    import axios from 'axios'
    import { Toast } from 'mint-ui'
    export default {
        data () {
            return {
                phoneNumber: '',
                mailNumbers: '',
                show: true,
                passWord: '',
				timer: null,
				count:'60'
            }
        },
        created () {
            if (this.publicToken === '') {
                this.$router.push('/loading')
            }
        },
        computed: {
            ...mapGetters([
                'publicToken'
            ])
        },
        methods: {
            // 当用户点击了之后没有输入值--失去焦点的时候恢复默认的情况没有处理
            // 正则
            phoneNum(){
                if(!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber)){
                    this.$createToast({ time:700, type:'warn', txt: '请输入正确手机号' }).show()
                }
            },
            passwordVer(){
                if(!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(this.passWord)){
                    this.$createToast({ time:700, type:'warn', txt: '密码由数字和字母结合,不能小于8位' }).show()
                }
            },
            // 获取注册的验证码 -- phone 必填
            getMailNumber () {
                if(!/^1[3|4|5|7|8][0-9]{9}$/.test(this.phoneNumber)){
                    this.$createToast({ time:700, type:'warn', txt: '请输入正确手机号' }).show()
                }else {
                    const TIME_COUNT = 60;
                    if (!this.timer) {
                        this.count = TIME_COUNT
                        this.show = false;
                        this.timer = setInterval(() => {
                            if (this.count > 0 && this.count <= TIME_COUNT) {
								this.count--
                            } else {
                                this.show = true
                                clearInterval(this.timer)
                                this.timer = null
                            }
                        }, 1000)
                    }
                    let address = mailNumber + '/' + this.phoneNumber + '/verify'
                    axios.get(address, {
                        params: {
                            access_token: this.publicToken
                        }
                    }).then((res) => {
                        if(res.data.code === 200){
                            this.$createToast({ time:700, type:'warn', txt: '验证码已发送' }).show()
                        }
                        if(res.data.code === 500){
                            this.$createToast({ time:700, type:'warn', txt: '验证码发送失败' }).show()
                        }
                    }).catch((error) => {
                    })
				}

            },
            // 发送注册请求
            getRegist () {
                let regestAddress = regist + '/' + this.mailNumbers + '/regist' + '?access_token=' + this.publicToken
                // 添加基本信息 手机号、密码、设备信息
                axios.post(regestAddress, {
                    'param': {
                        'fields': {
                            'phone': this.phoneNumber,
                            'password': this.passWord,
                            'device': 'wechat',
                            'deviceInfo': 'test'
                        }
                    }
                }).then((res) => {
                    this.$createToast({ time:700, type:'warn', txt: res.data.result }).show()
                }).catch((error) => {
                })
            }
        }
    }
</script>

<style lang="stylus" scoped>
	input{
		outline none
	}
	.register{
		padding 0 3rem
	}
	.title{
		font-family PingFang-SC-Medium
		font-size 1.2rem
		font-weight normal
		font-stretch normal
		line-height 4rem
		letter-spacing 0rem
		color #333333
		text-align center
	}
	.verification{
		margin-top 3rem
		overflow hidden
	}
	.verification .left{
		float left
		line-height 2rem
		width 10rem
		margin:1px;
	}
	.verification .right{
		float right
		width 7rem
		height 2rem
		background-color #333333
		border-radius 2rem
		font-family PingFang-SC-Medium
		font-size 1rem
		font-weight normal
		font-stretch normal
		line-height 2rem
		letter-spacing 0rem
		color #ffffff
	}
	.verification .time{
		background-color rgb(153,153,153)
	}
	.verifTop{
		overflow hidden
		border-bottom 1px solid #d1d1d1
		padding:1px 1px 0.5rem;
	}
	.message,.password{
		border-bottom 1px solid #d1d1d1
		margin-top 10px
	}
	.message input{
		display block
		margin-top 1rem
		padding:1px;
		font-family PingFang-SC-Regular
		font-weight normal
		font-stretch normal
		line-height 2rem
		letter-spacing 0rem
		color #333333
		margin:1px;
		width:90%;
	}
	.password input{
		display block
		margin-top 1rem
		padding:1px;
		font-family PingFang-SC-Regular
		font-weight normal
		font-stretch normal
		line-height 2rem
		letter-spacing 0rem
		color #333333
		margin:1px;
		width:90%;
	}
	.registerCon{
		margin-top 7rem
	}
	.registerCon .top{
		display block
		font-family PingFang-SC-Regular
		font-size 1rem
		font-weight normal
		font-stretch normal
		line-height 1rem
		letter-spacing 0rem
		color #333333
		background-size 1rem 1rem;
	}
	.registerCon .bottom{
		display block
		margin 2rem auto 0
		width 90%
		height 4rem
		background-color #333333
		border-radius 3rem
		font-family PingFang-SC-Medium
		font-size 1.2rem
		font-weight normal
		font-stretch normal
		line-height 4rem
		letter-spacing 0rem
		color #ffffff

	}

	.footer{
		margin-top 6rem
		font-family PingFang-SC-Medium
		font-size 1rem
		font-weight normal
		font-stretch normal
		line-height 0rem
		letter-spacing 0rem
		color #333333
	}
	.footer a{
		text-decoration underline
	}

</style>